<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学习 vue</title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			小结
			1.使用v-on:xxx或@xxx 绑定事件，其中xxx是事件名称。
			2.事件的回调需要配置在methods对象中，最终会在vm上。
			3.methods中配置的函数，不要用=>函数，否则this指向的不是vm
			4.methods中配置的函数，都是被Vue所管理的函数,tihs的指向是vm 或组建实例对象。
			5.@click="demo" 和@click="demo($event)"效果一致，但后者可以传参数、
		 -->
		<!-- 创建容器 -->
		<div id="root">
		<h2>欢迎来到{{name}}学习</h2>
		<!-- 点击button时，调用名为showInfo的函数 -->
		<!-- <button type="button" v-on:click="showInfo">点我</button> -->
		<!-- 以后都用简写 -->
		<button type="button" @click="showInfo1">点我提示1,无参</button>
		<button type="button" @click="showInfo2($event,66)">点我提示2，有参</button>
		
		</div>
		
		
		<script type="text/javascript">
			Vue.config.productionTip=false//阻止生产提示
			
			//创建vue实例
			const vm=new Vue({
				el:'#root',
				data:{
					name:'上硅谷',
				},
				
				//配置方法
				methods:{
					showInfo1(event){
						// console.log(event.target.innerText)
						// console.log(this)//此处的this是vm
						 alert("同学你好!")
					},
					showInfo2(event,number){
						console.log(number)
						alert("同学你好!!")
					}
				}
			})
			
		</script>
	</body>
</html>
